<template>
	<view class="page">
		<!-- 视频播放 start -->
		<view class="player">
			<video id="myTrailer" :src="trailerInfo.trailer" :poster="trailerInfo.poster"  class="movie" controls></video>
		</view>
		<!-- 视频播放 end -->
		
		<!-- 影片基本信息 start -->
		<view class="movie-info">
			<navigator :url="'../cover/cover?cover='+trailerInfo.cover">
				<image :src="trailerInfo.cover" class="cover"></image>
			</navigator>
	
			<view class="movie-desc">
				<view class="title">{{trailerInfo.name}}</view>
				<view class="basic-info">{{trailerInfo.basicInfo}}</view>
				<view class="basic-info">{{trailerInfo.originalName}}</view>
				<view class="basic-info">{{trailerInfo.totalTime}}</view>
				<view class="basic-info">{{trailerInfo.releaseDate}}</view>
				
				<view class="score-block score-box">
					<view class="big-score">
						<view class="score-words">综合评分</view>
						<view class="movie-score">{{trailerInfo.score}}</view>
					</view>
					<view class="score-stars">
						<!-- 防止页面加载在未赋值的时候就加载了组件 -->
						<block v-if="trailerInfo.score >= 0">
							<trailerStars :innerScore="trailerInfo.score" showNum="0"></trailerStars>
						</block>
						<view class="prise-counts">
							{{trailerInfo.prisedCounts}} 人点赞
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 影片基本信息 end -->
		
		<view class="line-wapper">
			<view class="line"></view>
		</view>
		
		<!-- 剧情介绍 start -->
		<view class="plots-block">
			<view class="plots-title">剧情介绍</view>
			<view class="plots-desc">{{trailerInfo.plotDesc}}</view>
		</view>
		<!-- 剧情介绍 end -->
		<view class="line-wapper">
			<view class="line"></view>
		</view>
		<!-- 演职人员 start -->
		<view class="scroll-block">
			<view class="plots-title">演职人员</view>
			<scroll-view scroll-x="true" class="scroll-list">
				<!-- 除微信小程序 其它平台均存在的代码-->
				<!-- #ifndef MP-WEIXIN -->
				<view class="actor-wapper" @click="lookStaffs" :data-staffIndex="directIndex" v-for="(direct,directIndex) in directorArray" :key="directIndex+'d'"  >
					<image class="plot-sgin" :src="direct.photo" mode="aspectFill"></image>
					<view class="actor-name">{{direct.name}}</view>
					<view class="actor-role">{{direct.actName}}</view>
				</view>
				<view class="actor-wapper" @click="lookStaffs" :data-staffIndex="actorIndex + directorArray.length" v-for="(actor,actorIndex) in actorArray" :key="actorIndex+'a'">
					<image class="plot-sgin" :src="actor.photo" mode="aspectFill"></image>
					<view class="actor-name">{{actor.name}}</view>
					<view class="actor-role">{{actor.actName}}</view>
				</view>
				<!-- #endif -->
				
				<!-- 仅在微信小程序上编译 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="actor-wapper" @click="lookStaffs" :data-staffIndex="directIndex" v-for="(direct,directIndex) in directorArray" :key="directIndex" >
					<image class="plot-sgin" :src="direct.photo" mode="aspectFill"></image>
					<view class="actor-name">{{direct.name}}</view>
					<view class="actor-role">{{direct.actName}}</view>
				</view>
				<view class="actor-wapper" @click="lookStaffs" :data-staffIndex="actorIndex + directorArray.length" v-for="(actor,actorIndex) in actorArray" :key="actorIndex">
					<image class="plot-sgin" :src="actor.photo" mode="aspectFill"></image>
					<view class="actor-name">{{actor.name}}</view>
					<view class="actor-role">{{actor.actName}}</view>
				</view>
				<!-- #endif -->
			</scroll-view>
		</view>
		<!-- 演职人员 end -->
		
		<!-- 剧照 start -->
		<view class="scroll-block">
			<view class="plots-title">剧照</view>
			<scroll-view scroll-x="true" class="scroll-list">
				<image @click="lookMe" :data-imgIndex="index" class="plot-image" v-for="(item,index) in plotPics" :key="index" :src="item" mode="aspectFill"></image>
			</scroll-view>
		</view>
		<!-- 剧照 end -->
	</view>
</template>

<script>
	import trailerStars from '../../component/trailerStars.vue'
	
	export default {
		data() {
			return {
				trailerInfo:{},
				plotPics:[],//剧照
				directorArray:[],//导演列表
				actorArray:[] ,//演员列表
				id:''
			}
		},
		//页面初次渲染完成
		onReady() {
			this.videoContext = uni.createVideoContext('myTrailer');
		},
		onHide() {
			//页面被隐藏的时候暂停播放
			this.videoContext.pause();
		},
		onShow() {
			//页面再次显示的时候，可以继续播放
			if(this.videoContext){
				this.videoContext.play();
			}
		},
		onLoad(params) {
			//通过api修改导航栏的属性
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#ff0000'
			})
			this.id = params.id;
			this.trailerList(params.id);
			this.getDirector(params.id);
			this.getActor(params.id);
		},
		//监听页面下拉刷新
		onPullDownRefresh(){
			this.trailerList(this.id);
			this.getDirector(this.id);
			this.getActor(this.id);
		},
		//此函数仅仅只支持在小程序端的分享  只能分享到微信群或者好友
		onShareAppMessage(res){
			return{
				title:this.trailerInfo.name,
				path:'/pages/movie/movie?id='+this.trailerInfo.id
			}
		},
		//监听导航栏的按钮
		onNavigationBarButtonTap(e){
			let index = e.index;
			
			let trailerInfo = this.trailerInfo;
			let traileId = trailerInfo.id;
			let traileName = trailerInfo.name;
			let cover = trailerInfo.cover;
			
			//根据判断是否进行分享
			if(index == 0){
				//分享到微信朋友圈
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 0,
				    href: "http://www.imovietrailer.com/#/pages/movie/movie?trailerId="+traileId,
				    title: "NEXT超音预告:《"+ traileName +"》",
				    summary: "NEXT超音预告:《"+ traileName +"》",
				    imageUrl: cover,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			}
		},
		methods: {
			//详情类容
			trailerList(trailerId){
				uni.request({
				    url: this.serverUrl+'/search/trailer/'+trailerId+this.user_authority, 
				    method:"POST",
				    success: (res) => {
						//判断请求状态
						if(res.data.status == 200){
							this.trailerInfo = res.data.data;
							//将json数据转换为数组
							this.plotPics = JSON.parse(res.data.data.plotPics);
						}
				    },
					complete: () => {
						uni.stopPullDownRefresh();//停止下拉刷新
					}
				});
			},
			//获取导演
			getDirector(trailerId){
				uni.request({
				    url: this.serverUrl+'/search/staff/'+trailerId+'/1'+this.user_authority, 
				    method:"POST",
				    success: (res) => {
						//判断请求状态
						if(res.data.status == 200){
							this.directorArray = res.data.data;
						}
				    }
				});
			},
			//获取演员
			getActor(trailerId){
				uni.request({
				    url: this.serverUrl+'/search/staff/'+trailerId+'/2'+this.user_authority, 
				    method:"POST",
				    success: (res) => {
						//判断请求状态
						if(res.data.status == 200){
							this.actorArray = res.data.data;
						}
				    }
				});
			},
			//剧照图片预览
			lookMe(e){
				let imgIndex = e.currentTarget.dataset.imgindex;
				//预览图片。
				uni.previewImage({
					current:this.plotPics[imgIndex],
					urls:this.plotPics
				})
			},
			//演职人员
			lookStaffs(e){
				let staffIndex = e.currentTarget.dataset.staffindex;
				
				//拼接导演和演员的数组，成为一个新数组
				let directorArray = this.directorArray;//导演
				let actorArray = this.actorArray;//演员
				let newStaffArray = [];
				newStaffArray = newStaffArray.concat(directorArray).concat(actorArray);//链接多个数组变成新的数组
				
				let urlarr = [];//新建数组存储url地址
				//遍历newStaffArray 取url地址添加到urls数组里
				for (let item in newStaffArray) {
					urlarr.push(newStaffArray[item].photo)
				}
				//预览图片。
				uni.previewImage({
					current:urlarr[staffIndex],
					urls:urlarr
				})
			}
		},
		components:{
			trailerStars
		}
	}
</script>

<style>
	@import url("movie.css");
</style>
